<template>

  <!-- 等待API数据接入list后再渲染 -->
  <div v-if="list.length" class="goodsArea-home">

    <div class="goodsItem" v-for="(item,index) in list" :key="index">
      <img :src="item.goodsThumb" alt="" class="img">
      <div class="title">{{item.goodsTitle}}</div>
      <div class="goodsDescArea">
        <!-- Price：整数部分 Num：分数部分 -->
        <div class="price">￥<span>{{item.goodsPrice}}</span>.<span class="point">{{item.goodsNum}}</span> </div>
        <div class="description">{{item.goodsDesc}}</div>
      </div>
    </div>

  </div>
  <div v-else>暂无数据</div>
    
</template>

<style>
.goodsArea-home{
  font-size: 28px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 0.3rem;
  padding-bottom: 110px;
  margin-top: 0;
}
.goodsItem{
  width: 48%;
  height: 48%;
  margin-top: 10px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.goodsItem .img{
  object-fit: cover;
  height: 4rem; 
  width: 100%;
}

.goodsDescArea{
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  padding-top: 5px;
  height: 60px;
  line-height: 60px;
  text-align: center; 
}

.goodsDescArea .price{
  color: #E4393C;
}

.goodsDescArea .description{
  color: #888;
  font-size: 22px;
}

.goodsDescArea .price .point{
  font-size: 22px;
}

</style>

<script>

import axios from 'axios'; 

export default {
    
   // API get
  data() {    
    return {
      // goods    
      list: [],
    }  
  },    
  async created() {     
    try {  
      const response = await axios.get('/api/home'); // 使用 await 和 async 来简化代码
        console.log("Success");   
        this.list = response.data.data;
        // 测试API接入 
        // console.log("List数据")
        // console.log(this.list)
    } catch (error) {    
      console.log(error);    
    }  
  }    

}
</script>